<template>
  <view class="bill-container">
    <z-paging
      ref="paging"
      v-model="billList"
      :default-page-size="20"
      :refresher-enabled="true"
      :loading-more-enabled="true"
      :refresher-default-text="useT('继续下拉刷新')"
      :refresher-pulling-text="useT('松开立即刷新')"
      :refresher-refreshing-text="useT('正在刷新.')"
      :empty-view-text="useT('暂无数据')"
      :loading-more-loading-text="useT('加载中.')"
      :loading-more-no-more-text="useT('没有更多了')"
      :refresher-complete-text="useT('刷新完成')"
      :loading-more-default-text="useT('点击加载更多')"
      :loading-more-fail-text="useT('加载失败，点击重新加载')"
      @query="queryList"
    >
      <template #top>
        <!-- 顶部导航栏 -->
        <u-navbar :border="false" bg-color="#fff" title-color="#333" :safe-area-inset-top="true" placeholder>
          <template #center>
            <text class="navbar-title">{{ useT('账单记录') }}</text>
          </template>
          <template #left>
            <u-icon name="arrow-left" size="20" color="#333" @click="goBack"></u-icon>
          </template>
        </u-navbar>
      </template>

      <!-- 页面内容 -->
      <view class="content">
        <!-- 账单列表 -->
        <view class="bill-list">
          <view class="bill-item" v-for="(bill, index) in billList" :key="index" @click="viewBillDetail(bill)">
            <view class="bill-left">
              <view class="bill-icon" :class="bill.pm === 1 ? 'income' : 'expense'">
                <u-icon :name="bill.pm === 1 ? 'arrow-up' : 'arrow-down'" size="20" :color="bill.pm === 1 ? '#12C284' : '#FF6B6B'"></u-icon>
              </view>
            </view>
            <view class="bill-right">
              <view class="bill-info">
                <text class="bill-title">{{ useT(bill.title) }}</text>
                <text class="bill-time">{{ formatTime(bill.add_time) }}</text>
              </view>
              <view class="bill-amount" :class="bill.pm === 1 ? 'income' : 'expense'">
                <text class="amount-text">{{ bill.pm === 1 ? '+' : '-' }}{{ bill.number }}</text>
                <text class="balance-text">{{ useT('余额') }}: {{ bill.balance }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { getBillList } from '@/api/user';
import { useT } from '@/utils/i18n.js';
import { onShow } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';

// 响应式数据
const billList = ref([]);
const paging = ref(null);

onShow(() => {
  console.log('账单页面显示');
  uni.hideTabBar();
});

// z-paging 查询方法
const queryList = (pageNum, pageSize) => {
  console.log(`加载第${pageNum}页，每页${pageSize}条数据`);

  const params = {
    category: 'now_money',
    limit: pageSize,
    page: pageNum
  };

  getBillList(params)
    .then((res) => {
      console.log('账单列表数据:', res);
      if (res.status === 200) {
        const data = res.data || [];
        paging.value.complete(data);
      } else {
        uni.showToast({
          title: res.msg || useT('获取账单失败'),
          icon: 'none'
        });
        paging.value.complete([]);
      }
    })
    .catch((error) => {
      console.error('获取账单列表失败:', error);
      uni.showToast({
        title: error,
        icon: 'none'
      });
      paging.value.complete([]);
    });
};

// 方法

const viewBillDetail = (bill) => {
  console.log('查看账单详情:', bill);
  // 可以跳转到账单详情页面
  uni.showToast({
    title: useT('查看账单详情'),
    icon: 'none'
  });
};

const goBack = () => {
  uni.navigateBack();
};

const formatTime = (timeStr) => {
  if (!timeStr) return '';

  // 确保正确解析时间字符串，支持多种格式
  let date;
  if (timeStr.includes(' ')) {
    // 格式: "2025-10-19 21:42:45"
    date = new Date(timeStr.replace(/-/g, '/'));
  } else {
    date = new Date(timeStr);
  }

  // 检查日期是否有效
  if (isNaN(date.getTime())) {
    return timeStr; // 如果解析失败，返回原始字符串
  }

  return date.toLocaleString();
};

// 生命周期
onMounted(() => {
  console.log('账单页面加载完成');
});
</script>

<style lang="scss" scoped>
.bill-container {
  min-height: 100vh;
  background-color: #f8f9fa;
}

// 导航栏标题
.navbar-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.content {
  padding: 0 24rpx;

  // 账单列表
  .bill-list {
    .bill-item {
      display: flex;
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-top: 16rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:active {
        transform: scale(0.98);
      }

      .bill-left {
        margin-right: 24rpx;

        .bill-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f8f9fa;

          &.income {
            background-color: rgba(18, 194, 132, 0.1);
          }

          &.expense {
            background-color: rgba(255, 107, 107, 0.1);
          }
        }
      }

      .bill-right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .bill-info {
          flex: 1;

          .bill-title {
            display: block;
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
            line-height: 1.3;
          }

          .bill-desc {
            display: block;
            font-size: 24rpx;
            color: #666;
            margin-bottom: 8rpx;
            line-height: 1.4;
          }

          .bill-time {
            display: block;
            font-size: 20rpx;
            color: #999;
            line-height: 1.2;
          }
        }

        .bill-amount {
          text-align: right;
          margin-left: 16rpx;

          .amount-text {
            display: block;
            font-size: 32rpx;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 4rpx;

            &.income {
              color: #12c284;
            }

            &.expense {
              color: #ff6b6b;
            }
          }

          .balance-text {
            display: block;
            font-size: 20rpx;
            color: #999;
            line-height: 1.2;
          }

          &.income .amount-text {
            color: #12c284;
          }

          &.expense .amount-text {
            color: #ff6b6b;
          }
        }
      }
    }
  }
}
</style>
